<div class="ama-dashboard">

    <ng-container *ngIf="!(loading$ | async); else loadingTemplate">
        <ng-container *ngIf="dataSource$ | async; let dataSource">
            <ng-container *ngIf="dataSource.data.length; else noDataTemplate">
                <div class="ama-dashboard-list">
                    <div class="ama-dashboard-list-container">
                            <mat-table
                            [dataSource]="dataSource"
                            matSort
                            [matSortActive]="sorting.key"
                            [matSortDirection]="$any(sorting.direction)"
                            [matSortDisableClear]="true"
                            (matSortChange)="onSortChange($event)">
                            <ng-container matColumnDef="thumbnail">
                                <mat-header-cell *matHeaderCellDef></mat-header-cell>
                                <mat-cell *matCellDef="let element" (click)="rowSelected(element)">
                                    <mat-icon class="ama-thumbnail" color="primary">assessment</mat-icon>
                                </mat-cell>
                            </ng-container>

                            <ng-container matColumnDef="name">
                                <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'DASHBOARD.TABLE.COLUMN_NAME' | translate }}</mat-header-cell>
                                <mat-cell
                                    *matCellDef="let element"
                                    (click)="rowSelected(element)"
                                    [attr.data-automation-id]="'project-' + element.id"
                                    [attr.data-project-id]="element.id"
                                    [attr.data-project-name]="element.name">
                                    <span> {{element.name}} </span>
                                </mat-cell>
                            </ng-container>

                            <ng-container matColumnDef="creationDate">
                                <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'DASHBOARD.TABLE.COLUMN_CREATED' | translate }}</mat-header-cell>
                                <mat-cell *matCellDef="let element" (click)="rowSelected(element)"> {{ element.creationDate | amTimeAgo }} </mat-cell>
                            </ng-container>

                            <ng-container matColumnDef="createdBy">
                                <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'DASHBOARD.TABLE.COLUMN_CREATED_BY' | translate }}</mat-header-cell>
                                <mat-cell *matCellDef="let element" (click)="rowSelected(element)"> {{ element.createdBy }} </mat-cell>
                            </ng-container>

                            <ng-container matColumnDef="version">
                                <mat-header-cell *matHeaderCellDef>{{ 'DASHBOARD.TABLE.COLUMN_VERSION' | translate }}</mat-header-cell>
                                <mat-cell *matCellDef="let element" [attr.data-automation-id]="'project-version-' + element.id" (click)="rowSelected(element)"> {{ element.version }} </mat-cell>
                            </ng-container>

                            <ng-container matColumnDef="menu">
                                <mat-header-cell *matHeaderCellDef>{{ 'DASHBOARD.TABLE.COLUMN_OPTIONS' | translate }}</mat-header-cell>
                                <mat-cell *matCellDef="let element">
                                    <button mat-icon-button [matMenuTriggerFor]="menu" [attr.data-automation-id]="'project-context-' + element.id"
                                        [title]="'APP.MORE_ACTIONS' | translate">
                                        <mat-icon>more_vert</mat-icon>
                                    </button>
                                    <mat-menu #menu="matMenu">
                                        <button mat-menu-item (click)="editRow(element)" [attr.data-automation-id]="'project-edit-' + element.id">
                                            <mat-icon>create</mat-icon> <span>{{ 'APP.MENU.EDIT' | translate }}</span>
                                        </button>
                                        <button mat-menu-item (click)="deleteRow(element)" [attr.data-automation-id]="'project-delete-' + element.id">
                                            <mat-icon>delete</mat-icon> <span>{{ 'APP.MENU.DELETE' | translate }}</span>
                                        </button>
                                        <button mat-menu-item (click)="downloadProject(element)" [attr.data-automation-id]="'project-download-' + element.id">
                                            <mat-icon>file_download</mat-icon> <span>{{ 'APP.MENU.DOWNLOAD' | translate }}</span>
                                        </button>
                                        <button mat-menu-item (click)="saveAsProject(element)" [attr.data-automation-id]="'project-save-as-' + element.id">
                                            <mat-icon svgIcon="save_as"></mat-icon> <span>{{ 'APP.MENU.SAVE_AS' | translate }}</span>
                                        </button>
                                        <button *ngFor="let button of buttons" mat-menu-item
                                            [attr.data-automation-id]="'project-' + button.automationId + '-' + element.id"
                                            (click)="handleClick(button.actionClass, element.id)">
                                                <mat-icon>{{ button.icon }}</mat-icon> <span>{{ button.title | translate }}</span>
                                        </button>
                                    </mat-menu>
                                </mat-cell>
                            </ng-container>

                            <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
                            <mat-row *matRowDef="let row; columns: displayedColumns;">
                            </mat-row>
                        </mat-table>
                    </div>

                    <div *ngIf="(dataSource$ | async).data.length" class="ama-paginator-block">
                        <mat-paginator
                            *ngIf="pagination$ | async; let pagination"
                            (page)="onPageChange($event, pagination)"
                            [pageIndex]="pagination.skipCount / pagination.maxItems"
                            [length]="pagination.totalItems"
                            [pageSize]="pagination.maxItems"
                            [pageSizeOptions]="pageSizeOptions">
                        </mat-paginator>
                    </div>

                </div>
            </ng-container>

            <ng-template #noDataTemplate>
                <adf-empty-content
                    icon="apps"
                    class="ama-dashboard-emptylist"
                    title="DASHBOARD.TABLE.NO_ITEMS">
                </adf-empty-content>
            </ng-template>
        </ng-container>
    </ng-container>


    <ng-template #loadingTemplate>
        <div class="ama-dashboard-list">
            <mat-spinner class="ama-dashboard-spinner"></mat-spinner>
        </div>
    </ng-template>

</div>
